<template>
  <div>
    <title-card title="Window Full Screen"></title-card>
    <n-button type="info" @click="enter" class="mr-2"> Enter Window Full Screen </n-button>
    <n-button type="success" @click="toggle" class="mr-2"> Toggle Window Full Screen </n-button>
    <n-button type="error" @click="exit" class="mr-2"> Exit Window Full Screen </n-button>

    Current State: {{ isFullscreen }}

    <title-card title="Dom Full Screen"></title-card>

    <div
      ref="domRef"
      class="domRef"
    >
      <n-button type="primary" @click="toggleDom" class="mr-2"> Exit Dom Full Screen </n-button>
    </div>
  </div>
</template>

<script lang="ts" name="FullScreenCom">
  import { defineComponent, ref } from 'vue';
  import TitleCard from "@/components/TitleCard/index.vue";
  import { useFullscreen } from '@vueuse/core';

  export default defineComponent({
    components: { TitleCard },
    setup() {
      type Nullable<T> = T | null;
      const domRef = ref<Nullable<HTMLElement>>(null);
      const { enter, toggle, exit, isFullscreen } = useFullscreen();

      const { toggle: toggleDom } = useFullscreen(domRef);
      return {
        enter,
        toggleDom,
        toggle,
        isFullscreen,
        exit,
        domRef,
      };
    },
  });
</script>

<style lang="scss" scoped>
.mr-2 {
  margin-right: 10px;
}
.domRef {
  box-sizing: border-box;
  width: 50%;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  height: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.375rem;
  background-color: #fff !important;
}
</style>